<template> 
  <div class="app-container">
    <div >
      <div style="padding: 10px;">
        <el-row>
          <el-col :span="12">已关联的属性集合列表 </el-col>
          <el-col :span="12" style="text-align: right;padding: 2px;">
            <el-button class="btn-add" type="primary" size="mini"  @click="openAttrCategorySelectForm">添加</el-button>
          </el-col>
        </el-row>
        <el-table ref="productAttrCateTable"
                  style="width: 100%"
                  :data="haveMappingList"
                  v-loading="listLoading"
                  border>
          <el-table-column label="编号" width="100" align="center">
            <template slot-scope="scope">{{scope.row.id}}</template>
          </el-table-column>
          <el-table-column label="类型名称" align="center">
            <template slot-scope="scope">{{scope.row.name}}</template>
          </el-table-column>
          <el-table-column label="规格属性数量" width="100" align="center">
            <template slot-scope="scope">{{scope.row.attributeCount==null?0:scope.row.attributeCount}}</template>
          </el-table-column>
          <el-table-column label="一般属性数量" width="100" align="center">
            <template slot-scope="scope">{{scope.row.paramCount==null?0:scope.row.paramCount}}</template>
          </el-table-column>
          <el-table-column label="设置" width="200" align="center">
            <template slot-scope="scope">
              <el-button
                size="mini"
                @click="deleteMapping(scope.$index, scope.row)">删除关联
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>

     <!--已经关联的属性属性集合对应的属性列表-->
      <div style="padding-bottom: 10px;" >
        <ProductAllAttrList :cidList.sync="haveMappingAttrCategoryIdList" tableHeight="305"></ProductAllAttrList>
      </div>

      <el-dialog
        title="可选的属性集合列表"
        :visible.sync="allListDialogVisible"
        :v-if="allListDialogVisible"
        append-to-body
        width="50%"
        :before-close="closeAllListForm">
        <el-form :inline="true" :model="allListQuery" label-width="130px">
          <el-form-item label="分类名称:" prop='name'>
            <el-input v-model="allListQuery.name"  ></el-input>
          </el-form-item>
          <el-form-item>
            <div style="display:inline-block;width: 100px;"></div>
            <el-button type="primary" @click="getAllAttrCategoryList">查询</el-button>
            <el-button type="primary" @click="addAttrCategoryMapping">确认</el-button>
          </el-form-item>
        </el-form>
        <el-table
          :data="allAttrCategoryList"
          v-loading="allListLoading"
          element-loading-text="拼命加载中"
          border
          fit
          highlight-current-row
          style="width: 100%"
          @selection-change="allListSelectionChange"
        >
          <el-table-column
            type="selection"
            width="55">
          </el-table-column>
          <el-table-column
            prop="id"
            label="编号"
            width="100">
            <template slot-scope="scope">{{scope.row.id}}</template>
          </el-table-column>
          <el-table-column
            prop="name"
            label="属性集合类型">
          </el-table-column>
          <el-table-column
            prop="name"
            label="属性集合名称">
          </el-table-column>
        </el-table>

        <div class="pagination-container">
          <el-pagination
            background
            @current-change="allListPageNumChange"
            layout="total, sizes,prev, pager, next,jumper"
            :page-size="allListQuery.pageSize"
            :current-page.sync="allListQuery.pageNum"
            :total="allListTotal">
          </el-pagination>
        </div>
      </el-dialog>

    </div>
  </div>
</template>
<script>
  import {attrCategoryPageList} from '@/api/productAttrSet'
  import {listByCategoryId,deleteCategoryToAttrCategoryMapping,addCategoryToAttrCategoryMapping} from '@/api/productCategoryAttrCategoryMapping'
  import ProductAllAttrList from './ProductAllAttrList'
  export default {
    components: {ProductAllAttrList},
    name: 'productAttrCateList',
    props: ['categoryId'],
    data() {
      return {
        //已经映射的属性集合列表
        haveMappingList: null,
        //所有属性集合列表
        allAttrCategoryList:null,
        total: null,
        listLoading: true,
        allListLoading:true,
        listQuery: {
          categoryId: null
        },
        allListQuery:{
          name:null,
          pageNum:1,
          pageSize:10
        },
        haveMappingAttrCategoryIdList:[],
        allListTotal:0,
        dialogVisible: false,
        allListDialogVisible:false,
        dialogTitle:'',
        productAttrCate:{
          name:'',
          id:null
        },
        currentSelectItemList:[],
        rules: {
          name: [
            { required: true, message: '请输入类型名称', trigger: 'blur' }
          ]
        }
      }
    },
    created() {
      this.getHaveMappingList();
    },
    methods: {
      //列表关联的属性集合
      getHaveMappingList() {
        this.listLoading = true;
        if(this.categoryId && this.categoryId!=0){
          this.listQuery.categoryId=this.categoryId;
        }
        listByCategoryId(this.listQuery).then(response => {
          this.listLoading = false;
          this.haveMappingList = response.data;
          this.haveMappingAttrCategoryIdList =[];
          if(this.haveMappingList.length>0){
            this.haveMappingList.forEach(item=>{
              this.haveMappingAttrCategoryIdList.push(item.id);
            });
          }
        });
      },
      //加载所有属性集合
      getAllAttrCategoryList() {
        this.allListLoading = true;
        attrCategoryPageList(this.allListQuery).then(response => {
          this.allListLoading = false;
          this.allAttrCategoryList = response.data.records;
          this.allListTotal = response.data.total;
        });
      },
      //删除关联的分类属性
      deleteMapping(index, row){
        this.$confirm('是否要删除该属性集合吗', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          let param ={
            "categoryId":this.categoryId,
            "attrCategoryId":row.id
          };

          deleteCategoryToAttrCategoryMapping(param).then(response=>{
            this.$message({
              message: '删除成功',
              type: 'success',
              duration:1000
            });
            this.getHaveMappingList();
          });
        });
      },

      //打开属性集合选择Form
      openAttrCategorySelectForm(){
        this.allListDialogVisible = true;
        this.getAllAttrCategoryList();
      },

      /**
       * 关闭映射属性集合Form
       */
      closeAllListForm(done) {
        this.allListQuery.name = null;
        this.allListDialogVisible=false;
      },
      allListSelectionChange(val){
        if(!val || val.length >1){
          this.currentSelectItemList = null;
          this.$message({
            message: '请选择一个分类',
            type: 'warning',
            duration:1000
          });
        } else{
          this.currentSelectItemList = val;
        }
      },
      allListPageNumChange(val){
        this.getAllAttrCategoryList();
      },

      /**
       * 确认添加属性集合
       */
      addAttrCategoryMapping(){
        if(this.currentSelectItemList && this.currentSelectItemList.length>0){
          let param ={
            "categoryId":this.categoryId,
            "attrCategoryId":this.currentSelectItemList[0].id
          };
          addCategoryToAttrCategoryMapping(param).then(response=>{
            this.$message({
              message: '添加成功',
              type: 'success',
              duration:1000
            });
            this.getHaveMappingList();
            this.closeAllListForm();
          });
        }else{
          this.$message({
            message: '请选择一个属性集合',
            type: 'warning',
            duration:1000
          });
        }
      }
    }
  }
</script>
<style   >

.el-dialog{
  margin-top: 1vh !important;
}
.el-dialog__wrapper .el-dialog .el-dialog__body{
  height: 630px !important;
  padding: 5px 10px !important;
  overflow-y: scroll;
}
.el-table .el-table__cell {
  padding: 5px 0 !important;
}
.el-button{
  margin-bottom: 1px !important;
  margin-top: 1px !important;
  margin-left: 0px !important;
}
</style>



